<table id="demo" lay-filter="test" ></table>

<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height:500
            ,weight:850
            ,toolbar:true
            ,url: '/menu/queryMenus' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
                ,{field: 'name', title: 'NAME', width:120}
                ,{field: 'parent_id', title: 'P_ID', width:80, sort: true}
                ,{field: 'url', title: 'URL', width:130}
                ,{field: 'icon', title: 'ICON', width: 130}
                ,{field: 'perms', title: 'PERMS', width: 150, sort: true}
                ,{field: 'type', title: 'TYPE', width: 80, sort: true}
                ,{field: 'sort', title: 'SORT', width: 80}
                ,{field:"right",title:"操作",toolbar: '#operating'}
            ]]
            ,page:{
                limit:5//每页显示5条
                ,limits:[5,8,10] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<<' //上一页显示内容，默认显示 > <
                ,next: '>>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布
            },
        });

    });
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use("table",function(){
        table = layui.table;
        table.rander({...});
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                // 同步更新缓存对应的值
                obj.update({
                    username: 'shine001',
                    city: '北京',
                    sex:'女',
                    score:99});
            }
        });
    });
</script>

